/* 
    公共css 主要作用于
*/
.flex{
    display: flex;
}
.column{
    flex-direction: column;
}
.row-reverse{
    flex-direction: row-reverse;
}
.j-around{
    justify-content: space-around;
}
.j-between{
    justify-content: space-between;
}
.j-center{
    justify-content: center;
}
.a-center{
    align-items: center;
}
.j-end{
    justify-content: end;
}
.a-end{
    align-items: flex-end;
}
.indent{
    text-indent: 4em;
}
.indent-2{
    text-indent: 2em;
}
.bred{
    border: 1px red solid;
}
.wrap{
    flex-wrap: wrap;
}




.header{
    padding: 50px;
    background-color: #ededed;
}
.body{
    margin-top: 20px;
}
.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px red solid;
    width: 80%;
    padding: 20px;
    border-radius: 20px;
    margin-top: 20px;
}
.item{
    height: 300px;
    width: 200px;
    border-radius: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.item:nth-child(4n){
    margin-right: 0px;
}
.itemAvatar{
    height: 200px;
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
}
.avatarStyle{
    height: 200px;
    width: 90%;
    border-radius: 20px;
}
.userName{
    font-size: 24px;
    color: #000;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}
/* 
    @Author:hkk
    @Date:2023年1月7日16:09:03
    @Description:路由CSS样式
*/
.routerNav{
    width: 20%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.routerHead{
    padding: 70px 0 0 300px;
}
.navItem{
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    border-radius: 10px;
    border: 1px #ddd solid;
    margin-bottom: 10px;
}
.navItem:hover{
    background-color: #ddd;
    color: white;
}
